﻿@{
    ViewData["Title"] = "配置信息";
    Layout = "~/Views/Shared/_LayoutNone.cshtml";
}
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div style="padding-bottom: 10px;">
                <button class="layui-btn layui-btn-sm layuiadmin-btn-list" data-type="add"><i class="layui-icon layui-icon-add-1"></i>新增选项</button>
            </div>
            <table id="type_tree_data" lay-filter="type_tree_data"></table>
            <blockquote class="layui-elem-quote" style="margin: 10px 0; padding: 10px">
                <div>
                    <strong>模块说明：</strong>
                    此模块可以作为整个系统的通用配置模块，前端凡是涉及相对固定的内容，间隔一段时间需要跟新的都可以配置在此表中，方便前端调用，如：网站中的合作伙伴信息，网站底部信息等。
                    <strong>状态：</strong>
                    1. 显示（此状态控制在前端显示此选项）
                    2. 隐藏（此状态控制在前端隐藏此选项）
                </div>
            </blockquote>
            <script type="text/html" id="contentTpl">
                {{#  if(d.type_id == 1){ }}
                {{ d.info_value || '' }}
                {{#  } else if(d.type_id == 2) { }}
                {{ d.show_info_content || '' }}
                {{#  } else if(d.type_id == 3) { }}
                <a style="cursor: pointer" onclick="preview(this);"><img src="{{ d.show_info_path }}" style="border-radius: 50%; width: 25px; height: 25px; cursor: pointer" /></a>
                {{#  } else if(d.type_id == 4) { }}
                {{ d.is_open ? '<span class="layui-badge layui-bg-green">开启</span>' :'<span class="layui-badge layui-bg-red">关闭</span>' }}
                {{#  } else if(d.type_id == 5) { }}
                <a href='{{ d.ext_link }}' target="_blank">{{ d.info_value }}</a>
                {{#  } else if(d.type_id == 6) { }}
                {{ d.ext_desc }}
                {{#  } else { }}
                {{ d.info_value || '' }}
                {{#  } }}
            </script>
            <script type="text/html" id="table-content-list">
                <a class="layui-btn layui-btn-xs" lay-event="add"><i class="layui-icon layui-icon-add-1"></i>新增</a>
                <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
            </script>
            <script type="text/html" id="statusTpl">
                <input type="checkbox" name="is_show" lay-skin="switch" lay-text="显示|隐藏" lay-filter="switch_is_show"
                       value="{{ d.setting_info_id }}" data-json="{{ encodeURIComponent(JSON.stringify(d)) }}" {{ d.is_show? 'checked' : '' }}>
            </script>
            <input type="hidden" id="icon_path" name="icon_path" value="" />
            <input type="hidden" id="setting_info_id" name="setting_info_id" value="" />
            <input type="file" id="btUpload" style="display:none;" />
        </div>
    </div>
</div>

<script src="~/layuiadmin/layui/layui.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script>
    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: '/lib/index' //主入口模块
    }).use(['index', 'table', 'util', 'treeTable', 'upload'], function () {
        var table = layui.table
            , admin = layui.admin
            , form = layui.form
            , upload = layui.upload
            , util = layui.util;

        var treeTable = layui.treeTable;
        treeTable.render({
            elem: '#type_tree_data',
            toolbar: false,
            tree: {
                iconIndex: 1
            },
            cols: [
                [
                    {
                        field: "setting_info_id",
                        title: "ID",
                        sort: !0,
                        width: 100,
                    },
                    {
                        field: "info_name",
                        title: "选项名称",
                        width: 200,
                    },
                    {
                        field: "sort_num",
                        title: "排序(可编辑)",
                        edit: "text",
                        align: "center",
                        style: "background-color: #e8f1ff; color: #666;",
                        width: 120
                    },
                    {
                        field: "show_content",
                        title: "选项值",
                        templet: "#contentTpl",
                        width: 200
                    },
                    {
                        field: "info_tips",
                        title: "说明/示例",
                        minWidth: 200
                    },
                    {
                        field: "is_show",
                        title: "状态",
                        templet: "#statusTpl",
                        align: "center",
                        width: 120
                    },
                    {
                        title: "操作",
                        width: 200,
                        align: "center",
                        fixed: "right",
                        toolbar: "#table-content-list"
                    }]
            ],
            reqData: function (data, callback) {
                loading = layer.load(2, {
                    shade: [0.2, '#000']
                });
                admin.req({
                    url: '/settinginfo/list'
                    , data: { parent_id: data ? data.setting_info_id : "-1" }
                    , done: function (res) {
                        layer.close(loading);
                        callback(res.data);
                    }
                });
            },
            style: 'margin-top:0;',
        });

        // 右侧操作事件
        treeTable.on("tool(type_tree_data)", function (t) {
            var setting_info_id = t.data.setting_info_id;
            var type_level = t.data.type_level;
            if ("del" === t.event) {
                layer.confirm("确定删除此配置信息？", function (e) {
                    admin.req({
                        headers: {
                            'RequestVerificationToken': csrfToken
                        },
                        method: 'POST',
                        url: '/settinginfo/delete/' + setting_info_id
                        , done: function (res) {
                            t.del();
                            layer.close(e);
                        }
                    });

                });
            }
            else if ("edit" === t.event) {
                layer.open({
                    type: 2,
                    title: "编辑配置信息",
                    content: "/settinginfo/edit?id=" + setting_info_id,
                    maxmin: !0,
                    area: ["750px", "550px"],
                    btn: ["确定", "取消"],
                    yes: function (e, i) {
                        a = i.find("iframe").contents().find("#layuiadmin-app-form-edit");
                        a.trigger("click");
                    }
                })
            }
            else if ("add" === t.event) {
                layer.open({
                    type: 2,
                    title: "新增配置信息",
                    content: "/settinginfo/create?parent_id=" + setting_info_id,
                    maxmin: !0,
                    area: ["750px", "550px"],
                    btn: ["确定", "取消"],
                    yes: function (e, i) {
                        a = i.find("iframe").contents().find("#layuiadmin-app-form-submit");
                        a.trigger("click");
                    }
                })
            }
        }),

            // 监听是否启用操作
            form.on('switch(switch_is_show)', function (obj) {
                var json = JSON.parse(decodeURIComponent($(this).data('json')));
                var type_status = obj.elem.checked == true ? true : false;
                admin.req({
                    headers: {
                        'RequestVerificationToken': csrfToken
                    },
                    method: 'POST',
                    url: '/settinginfo/setshow?id=' + this.value + '&status=' + type_status
                    , done: function (res) {
                        console.log(`res=${JSON.stringify(res)}`);
                    }
                });
                json = table.clearCacheKey(json);
            });

        // 监听排序操作
        treeTable.on('edit(type_tree_data)', function (obj) {
            console.log(`obj=${JSON.stringify(obj)}`);
            var value = obj.value;
            var data = obj.data;
            var field = obj.field;

            admin.req({
                headers: {
                    'RequestVerificationToken': csrfToken
                },
                method: 'POST',
                url: '/settinginfo/setsort?id=' + data.setting_info_id + '&sort=' + value
                , done: function (res) {
                    console.log(res.msg);
                    // window.location.reload();
                }
            });
        });

        var $ = layui.$, active = {
            add: function () {
                layer.open({
                    type: 2
                    , title: '添加选项'
                    , content: '/settinginfo/create?parent_id=-1'
                    , maxmin: true
                    , area: ['750px', '550px']
                    , btn: ['确定', '取消']
                    , yes: function (index, layero) {
                        var submit = layero.find('iframe').contents().find("#layuiadmin-app-form-submit");
                        submit.click();
                    }
                });
            }
        };

        $('.layui-btn.layuiadmin-btn-list').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });

    // 预览图片
    function preview(t) {
        var t = $(t).find("img");
        layer.open({
            type: 1,
            title: '照片预览',
            skin: 'layui-layer-rim',
            area: ['80%', '80%'],
            shadeClose: true,
            end: function (index, layero) {
                return false;
            },
            content: '<div style="text-align:center;padding: 20px;"><img src="' + $(t).attr('src') + '" /></div>'
        });
    }
</script>
